/**
 * Created by Zy on 2017/12/16.
 */
/*仪表盘交互*/
Vue.component('chart-gus',{
    props:[''],
    template:`
        <div>           
            <div :id="chartId" class="gurBox"></div>
        </div>
    `,
    data:function(){
      return {
          chartId:'chart_'+this.uuid(8, 64),
          myChart:null,
          gusdata:null
      }
    },
    mounted:function(){
        var _this=this;
        this.$nextTick(function(){
            _this.init();
            setInterval(function(){
                _this.getData();
            },1000);
        })
    },
    methods:{
        uuid:function(len, radix) {
            //uuid函数，为chart设置id熟悉
            var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
            var uuid = [],
                i;
            radix = radix || chars.length;
            if (len) {
                // Compact form
                for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
            } else {
                // rfc4122, version 4 form
                var r;
                // rfc4122 requires these characters
                uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
                uuid[14] = '4';
                // Fill in random data. At i==19 set the high bits of clock sequence as
                // per rfc4122, sec. 4.1.5
                for (i = 0; i < 36; i++) {
                    if (!uuid[i]) {
                        r = 0 | Math.random() * 16;
                        uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                    }
                }
            }
            return uuid.join('');
        },
        init:function(){
            var option = option = {
                backgroundColor: 'rgba(255,255,255,0)',
                tooltip : {
                    formatter: "{a} <br/>{c} {b}"
                },
                series : [
                    {
                        name: '实时风速（m/s）',
                        type: 'gauge',
                        z: 3,
                        min: 0,
                        max: 20,
                        splitNumber: 10,
                        radius: '75%',
                        itemStyle:{
                            normal:{
                                color:'#93c7ae'
                            }
                        },
                        pointer: {
                            show: true,
                            length: '80%',
                            width: 4,
                        },
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                width: 5,
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            length: 15,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线
                            length: 20,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                             color: 'auto'
                            }
                        },
                        title : {
                            offsetCenter: [0, '100%'],
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontSize: 14,
                                color:'#fff'
                            }
                        },
                        detail : {
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize:20
                            }
                        },
                        data:[{value: '0', name: '实时风速（m/s）'}]
                    },
                    {
                        name: '发电功率（KW）',
                        type: 'gauge',
                        center: ['19%', '55%'],    // 默认全局居中
                        radius: '55%',
                        min:0,
                        max:100,
                        endAngle:35,
                        splitNumber:8,
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                width: 2
                            }
                        },
                        itemStyle:{
                            normal:{
                                color:'#93c7ae'
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            length:6,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线
                            length:8,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        pointer: {
                            width:5
                        },
                        title: {
                            offsetCenter: [0, '100%'], // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontSize: 12,
                                color:'#fff'
                            }
                        },
                        detail: {
                            show:true,
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize:20,
                                offsetCenter: [0, '40%']
                            }
                        },
                        data:[{value: '0', name: '发电功率（KW）'}]
                    },
                    {
                        name: '风轮转速（RPM）',
                        type: 'gauge',
                        center: ['80%', '55%'],    // 默认全局居中
                        radius: '55%',
                        min:0,
                        max:100,
                        startAngle:140,
                        endAngle:-45,
                        splitNumber:8,
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                width: 2
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            length:6,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        itemStyle:{
                            normal:{
                                color:'#93c7ae'
                            }
                        },
                        splitLine: {           // 分隔线
                            length:8,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        pointer: {
                            width:4
                        },
                        title: {
                            offsetCenter: [0, '100%'],       // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontSize: 12,
                                color:'#fff'
                            }
                        },
                        detail: {
                            offsetCenter:['-20%','30%'],
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize:20
                            }
                        },
                        data:[{value: '0', name: '风轮转速（RPM)'}]
                    }
                ]
            };

            this.myChart= echarts.init(document.getElementById(this.chartId));
            this.showLoad();
            this.myChart.setOption(option);

        },
        showLoad:function(){
            var loadingConfig={
                text: '',
                color: '#b0e9fe',
                textColor: '#000',
                maskColor: 'rgba(255, 255, 255, 0)',
                zlevel: 0
            };
            this.myChart.showLoading(loadingConfig);
        },
        hideLoad:function(){
            this.myChart.hideLoading();
        },
        getData:function(){
            var _this=this;
            var success = function (res){
                  _this.gusdata = res.data;
                  console.log(_this.gusdata)
                _this.hideLoad()
                 _this.loadData()
            };
            var error = function(e){
                console.log(e)
            };
            axios.get(URL+'?code=1').then(success,error)
        },
        loadData:function(){
            var _this = this;
             option = {
                series:
                    [{
                    name: '实时风速（m/s）',

                    data:[{value: '', name: '实时风速（m/s）'}]
                },
                    {
                        name: '发电功率（KW）',
                        data:[{value: '', name: '发电功率（KW）'}]
                    },
                    {
                        name: '风轮转速（RPM）',

                        data:[{value: '', name: '风轮转速（RPM)'}]
                    }]
            };
            option.series[0].data[0].value = _this.gusdata.windSpeed5m;
            option.series[1].data[0].value = _this.gusdata.outputPower;
            option.series[2].data[0].value = _this.gusdata.revolutionPerMin;
            this.myChart.setOption(option);
        },
        /*两数之间的随机数*/
        rnd: function (min, max) {
            return (Math.random()*(max - min) + min).toFixed(2);
        },
    }
});
/*风机风险状态*/
Vue.component('chart-component',{
    props:[],
    'template':`
		<div>
			<div :id="chartId" class="chartBox" ></div>
		</div>
	`,
    /*computed:{
     chartLine:function(){
     return this.subchart
     }
     },*/
    data:function(){
        return {
            chartId:'chart_'+this.uuid(8, 64),
            myChart:null,
            dataArr:[]
        }
    },
    watch:{

    },
    mounted:function(){
        var _this=this;
        this.$nextTick(function(){
            _this.init();
            setInterval(function(){
                _this.loadData();
            },3000)
           // _this.triggerEvent();
        });
    },
    methods:{
        uuid:function(len, radix) {
            //uuid函数，为chart设置id熟悉
            var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
            var uuid = [],
                i;
            radix = radix || chars.length;
            if (len) {
                // Compact form
                for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
            } else {
                // rfc4122, version 4 form
                var r;
                // rfc4122 requires these characters
                uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
                uuid[14] = '4';
                // Fill in random data. At i==19 set the high bits of clock sequence as
                // per rfc4122, sec. 4.1.5
                for (i = 0; i < 36; i++) {
                    if (!uuid[i]) {
                        r = 0 | Math.random() * 16;
                        uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                    }
                }
            }
            return uuid.join('');
        },
        init:function(){
            var option={
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        lineStyle: {
                            color: '#2f2f30',
                            width: 1,
                            type: 'solid'
                        }
                    }
                },
                legend: []
                    /*{
                    orient: 'vertical',
                    right: '5%',
                    itemWidth: 10,
                    itemHeight: 10,
                    data: []
                }*/,
                grid: {
                    left: '5%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#2d2d2d',
                        width: 1,
                        type: 'solid'
                    }
                },
                axisLabel: {
                    show: false,
                    textStyle: {
                        color: '#fff'
                    }
                },
                xAxis: {
                    name: '时间',
                    type: 'category',
                    data:[],// data.T_Time,
                    //data:['2018/12/13', '2018/12/14','2018/12/15', '2018/12/16', '2018/12/17', '2018/12/18','2018/12/19'],
                    axisLine: {
                        lineStyle: {
                            color: '#2d2d2d'
                        }
                    },
                    nameTextStyle: {
                        color: '#fff'
                    }
                },
                yAxis: [{
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                            type: 'solid',
                            width: 1,
                            opacity: 0.1
                        }
                    },
                    //max:1,
                    axisLine: {
                        lineStyle: {
                            color: '#2e2d2e'
                        }
                    },
                    nameTextStyle: {
                        color: '#fff'
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#e6e6e6'
                        }
                    }
                }, {
                    position: 'right',
                    offset: 0,
                    axisLine: {
                        lineStyle: {
                            color: '#2e2d2e'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }],
                /*toolbox: {
                    show: true,
                    left:'45%',
                    top:'0%',
                    itemGap:15,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {}
                    }
                },*/
                series:[{
                    type:'line',
                    name:'运行状态',
                    data:[]
                }],
            };
            this.myChart= echarts.init(document.getElementById(this.chartId));
            this.showLoad();
            this.myChart.setOption(option);
        },
        showLoad:function(){
            var loadingConfig={
                text: '',
                color: '#b0e9fe',
                textColor: '#000',
                maskColor: 'rgba(255, 255, 255, 0)',
                zlevel: 0
            };
            this.myChart.showLoading(loadingConfig);
        },
        hideLoad:function(){
            this.myChart.hideLoading();
        },
        loadData:function(){
            this.hideLoad();
            var arrX = this.timeLine().arrx;
            var arrY = this.timeLine().arry;
            var nowDate = this.nowTime().toString();
            /*arrX.shift();
            arrX = arrX.push(nowDate);*/

            this.myChart.setOption({
                xAxis: {
                    name: '时间',
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {
                        lineStyle: {
                            color: '#2d2d2d'
                        }
                    },
                    nameTextStyle: {
                        color: '#fff'
                    },
                    data:arrX
                    //data:['2017/3/15', '2017/3/16', '2017/3/17', '2017/3/18','2017/3/19', '2017/3/20', '2017/3/21'],
                },
                yAxis:{
                    max:1,
                    min:0
                },
                lenged:[],
                /*_this.lenged,*/
                series:[{
                    name:name,
                    data:arrY
                }]
            })
        },
        getTime:function(val){
                var oData = new Date(val);
                return (oData.getFullYear()+'-'+(oData.getMonth()+1)+'-'+oData.getDate()+' '+oData.getHours()+':'+oData.getMinutes()+':'+oData.getSeconds())
            },
        nowTime:function(){
            var oData = new Date();
            return (oData.getFullYear()+'-'+(oData.getMonth()+1)+'-'+oData.getDate()+' '+oData.getHours()+':'+oData.getMinutes()+':'+oData.getSeconds())
        },
        timeLine:function(){
            var _this=this;
            /*获取七天前的时间戳*/
            var oDate = new Date();//当前时间
            var NowDatecuo = Date.parse(new Date())
            var beforDate = new Date(oDate);
            beforDate.setDate(oDate.getDate()-7);
            var beforetime=(beforDate.getFullYear()+'-'+(beforDate.getMonth()+1)+'-'+beforDate.getDate()+' '+beforDate.getHours()+':'+beforDate.getMinutes()+':'+beforDate.getSeconds());
            //console.log(oDate+'的时间戳为'+NowDatecuo)//7天前的时间

            // 获取时间格式的时间戳
            var stringTime = beforetime;
            var beforedatacuo7 = Date.parse(new Date(beforetime));
            //console.log(stringTime + "的时间戳为：" + beforedatacuo7);
            //console.log(stringTime+'的日期'+(new Date(beforedatacuo7)));

            //时间戳差值
            timewtampDiff = (NowDatecuo-beforedatacuo7)/100;
            //累加时间戳
            //console.log(timewtampDiff);
            var arr = [];
            for(var i=0 ;i<100;i++){
                var timeDate=beforedatacuo7+(timewtampDiff+1500)*i;
                arr.push(_this.getTime(timeDate))
            }
            arr.shift();
            arr.push(_this.nowTime());
            var arrData=[];
            for(var i=0; i<100;i++){
                arrData.push(_this.rnd(0,0.05))
            }

            arrData.unshift();
            var renData = _this.rnd(0,0.05)
            arrData.push(renData)
            return {
                'arrx':arr,
                'arry':arrData,
            }
        },
        rnd:function(min,max){
            return (Math.random()*(max - min) + min).toFixed(2);
        }
    }

});
